<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="https://pic.YuPengfei.cn/favicon.ico" type="image/x-icon" />
    <title>yupengfei.sapce</title>
    <style>
        :root {
            --background-color: #00000074;
            --primary-text-color: #F5F5F5;
            --secondary-text-color: rgba(255, 255, 255, 0.60);
            --reverse-text-color: #000000;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

            background-color: #000000;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            overflow: hidden;
            text-decoration: none;
        }

        .module-content {


            background-color: var(--background-color);
            display: flex;
            width: 100vw;
            height: 100vh;

            padding-top: 64px;
            padding-bottom: 64px;

            flex-direction: column;
            justify-content: space-between;
        }

        .nav {
            width: 100vw;
            color: white;
            text-align: start;
            padding-left: 10vw;
        
        }

        .content-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: baseline;
            gap: 32px;
            padding-left: 10vw;
        }

        .title {
            color: var(--primary-text-color);
            text-align: center;
            font-size: 48px;
            font-style: normal;
            font-weight: 600;
        }

        .subtitle {
            color: var(--secondary-text-color);
            font-size: 20px;
            font-style: normal;
            font-weight: 300;
            line-height: 28px;
            text-align: center;
        }

        span {
            vertical-align: middle;
        }

        .hero-wrapper {
            display: flex;
            flex-direction: column;
            align-items: baseline;
            gap: 8px;
            padding-right: 12px;
        }

        .title-wrapper {
            display: flex;
            gap: 4px;
        }

        .button-wrapper {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
        }

        .round-button {
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 20px;
            padding-right: 20px;

            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 24px;

            border: none;
            border-radius: 13px;
            background-color: rgb(29, 29, 29);
            transition: background-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);

            color: var(--reverse-text-color);
            cursor: pointer;
            color:var(--primary-text-color);

        }
        
        .round-button:hover {
            background-color: #333333;
        }

        .round-button:active {
            background-color: #3e3e3e;
        }

        .text-button {
            display: flex;
            align-items: center;
            gap: 8px;
            padding-top: 8px;
            padding-bottom: 8px;
            padding-left: 16px;
            padding-right: 16px;

            border-radius: 24px;
            background-color: transparent;
            color: var(--secondary-text-color);
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
            border: none;

            cursor: pointer;
        }

        .copyright {
            width: 100%;
            color: var(--primary-text-color);
            text-align: start;
            font-size: 14px;
            font-style: normal;
            font-weight: 300;
            line-height: 20px;
            padding-left: 10vw;

        }

        /*模拟设备重启呼吸灯*/

        .light {
            width: 70%;
            height: 70%;
            background: radial-gradient(circle, rgb(13, 255, 0) 20%, #00ff6e 80%, rgba(4, 255, 0, 0.2) 100%);
            border-radius: 50%;
            animation: breathing 0.5s infinite;
        }

        .light-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 999px;
            background-color: #006703;
            width: 20px;
            height: 20px;
        }

        @keyframes breathing {
            0% {
                opacity: 0.2;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0.2;
            }
        }

        #myCanvas {
            width: 100vw;
            height: 100vh;
            position: absolute;
            left: 0%;
            top: 0%;
            right: 0%;
            bottom: 0%;
            display: block;
            z-index: -1;
        }

        @media screen and (max-width: 768px) {
            .title {
                font-size: 26px;
            }

            .subtitle {
                font-size: 14px;
            }

            .light-wrapper {
                width: 12px;
                height: 12px;
            }
        }

        
    </style>

</head>

<body>
    <div class="module-content">
        <div class="nav">
            <! -- Navigation -->
        </div>
        <div class="content-wrapper">

            <div class="hero-wrapper">
                <div class="title-wrapper">
                    <h1 class="title">系统正在维护中</h1>
                    <span>The system is currently under maintenance.</span>
                    <div class="light-wrapper">
                        <div class="light"></div>
                    </div>
                </div>

                <p class="subtitle">
                    <span>
                        我们正在码不停题中，很快回来，请耐心等待。
                    </span>
                </p>
            </div>
            <div class="button-wrapper">
                <button class="round-button" onclick="refreshPage()">刷新页面</button>
            </div>

        </div>
        <div class="copyright">
            <p>© 2025 - 2030 [于鹏飞]<p>
        </div>
    </div>

    <canvas id="myCanvas"></canvas>

    <script>
        // 刷新页面
        function refreshPage() {
            location.reload();
        }

        // 初始化画布
        var canvas = document.getElementById('myCanvas'),
            ctx = canvas.getContext('2d');

        // 设置画布的宽度和高度
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 设置字母
        var letters = 'YuPengfei.Space YuPengfei.Space YuPengfei.Space';
        letters = letters.split('');

        // 设置列数
        var fontSize = 10,
            columns = canvas.width / fontSize;

        // 设置下落位置
        var drops = [];
        for (var i = 0; i < columns; i++) {
            drops[i] = 1;
        }

        // 设置颜色
        var colors = ['#05FF00', '#00BFFF', '#FF4500', '#FFA500', '#C202C2'];
        var lightBackgroundColors = ['#013600', '#002E3D', '#3E1100', '#342100', '#3C003C']
        var colorIndex = Math.floor(Math.random() * colors.length);

        // 绘制函数
        function draw() {
            ctx.fillStyle = 'rgba(0, 0, 0, .1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = colors[colorIndex];
            for (var i = 0; i < drops.length; i++) {
                var text = letters[Math.floor(Math.random() * letters.length)];
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                drops[i]++;
                if (drops[i] * fontSize > canvas.height && Math.random() > .95) {
                    drops[i] = 0;
                }
            }
        }

        // 循环动画
        setInterval(draw, 30);

        var light = document.querySelector('.light');
        light.style.background = colors[colorIndex];

        // 设置呼吸灯的背景颜色
        var lightWrapper = document.querySelector('.light-wrapper');
        lightWrapper.style.backgroundColor = lightBackgroundColors[colorIndex];

    </script>

</body>

</html>